<template>
  <view>
      <!-- 1 搜索框 -->
      <ugo-search></ugo-search>
      <!-- 2 tabs标签栏 -->
      <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      :bar-width="150"
      active-color="red"
      :active-item-style="{color:'black'}"
      ></u-tabs>

      <!-- 3 tabs对应内容 -->
    <view v-if="current===0">
      <navigator 
      class="goods-item"
      v-for="item in goods"
      :key="item.goods_id"
      :url="'/pages/goods_detail/goods_detail?goods_id='+item.goods_id"
      >
          <view class="goods-img">
              <u-image
              width="191rpx"
              height="191rpx"
              :src="item.goods_small_logo"
              ></u-image>
          </view>
          <view class="goods-info">
              <view class="goods-name u-line-2" >{{item.goods_name}}</view>
              <view class="goods-price">￥{{item.goods_price}}</view>
          </view>
      </navigator>
    </view>
    <view v-else-if="current===1">
      销量的内容
      <div class="sales"></div>
    </view>
    <view v-else-if="current===2">
      价格的内容
    </view>
  </view>
</template>

<script>
export default {
    data(){
        return{
            list:[
                {
                    name:"综合"
                },
                {
                    name:"销量"
                },
                {
                    name:"价格"
                },
            ],
            current:0,

            // 接口要求 参数
            params: {
                // 否	string	关键字
                query: "",
                // 否	string	分类id
                cid: "",
                // 否	number	页码  1
                pagenum: 1,
                // 否	number	页容量  20条
                pagesize: 20,
            },
            goods: [],

             // 接口数据的总长度
            total: 0,
        }
    },
    methods:{
        change(index){
            this.current = index
        },

        // 获取商品列表数据
        async getGoods() {
        const res = await this.$u.get("/goods/search", this.params);
        console.log(res);
        this.goods = [...this.goods,...res.message.goods]
        this.total = res.message.total
        // console.table(this.goods);

        // uni.stopPullDownRefresh();
    },
    },
    // onLoad 形参 可以获取到对应的url参数
    onLoad(option){
        // 获取上一个页面传递过来的id
        this.params.cid = option.id || 5;
        console.log(this.params);
        this.getGoods();
    },
     // 监听用户下拉刷新动作
    async onPullDownRefresh() {
    /* 
    重置 
    1 重置页面中显示的数据 goods=[]
    2 重置 参数 页码  1 
    3 重新发送请求 获取数据
     */
    // this.goods = [];
    // this.params.pagenum = 1;
    // // 异步的！！！
    // await this.getGoods();
    // uni.stopPullDownRefresh();
    this.goods = []
    this.params.pagenum = 1
    await this.getGoods()
    uni.stopPullDownRefresh()
  },
    // 滚动条触底
    onReachBottom(){
        /* 
    0 判断还有没有下一页数据  （拿当前的数组长度 和 总数据长度比较！！）
      1 没有 提示用户 
      2 有  。。。
    1 对页码参数 ++ pagenum++ 
    2 重新发送请求 
    3 数据响应回来  对数组进行合并 
     */
    
    if(this.goods.length>=this.total){
        // 没有更多数据

        uni.showToast({
            title: '没有更多数据了',
            icon: 'none',
        });

        return
    }
    this.params.pagenum++
    this.getGoods()
    }
}
</script>

<style lang="scss">
.goods-item {
    display: flex;
    margin-top: 10rpx;
    border-bottom: 1px solid #ccc;
  .goods-img {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .goods-info {
      display: flex;
      flex: 2;
      flex-direction: column;
      justify-content: space-around;
    .goods-name {
        font-size: 28prx;
    }

    .goods-price {
        color: $themeColor;
    }
  }
}
</style>